<template>
  <div class="coupon">
    <div class="coupon_item">
      <div class="coupon_left">满300减30</div>
      <div class="coupon_right">
        <p class="fsize14">订单减1.44元 减100元</p>
        <p>购买订单满2元</p>
        <p>2019-05-01 - 2019-05-31</p>
      </div>
      <div class="coupon_btn">立即领取</div>
    </div>
    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script lang="ts" setup name="Coupon">
// import { toRefs } from "vue";
// const props = defineProps({
//   datas: {
//     type: Object
//   }
// });
// const { datas } = toRefs(props);
</script>
<style lang="scss" scoped>
.coupon {
  padding: 10px;
  background-color: #ffffff;
  .coupon_item {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0.1rem 0;
    overflow: hidden;
    background: linear-gradient(to right, #ff6565, #ff8a8a);
    border-radius: 5px;
    .coupon_left {
      box-sizing: border-box;
      display: inline-block;
      float: left;
      width: 28%;
      height: 50px;
      padding: 0 14px;
      margin: 12px 0;
      font-size: 12px;
      line-height: 50px;
      color: #ffffff;
      text-align: center;
      border-right: 1px dotted #ffffff;
    }
    .coupon_right {
      box-sizing: border-box;
      display: inline-block;
      float: left;
      width: 50%;
      height: 100%;
      padding: 10px;
      font-size: 12px;
      color: #ffffff;
      text-align: left;
      p {
        margin: 0;
      }
    }
    .coupon_btn {
      position: absolute;
      top: 50%;
      right: 10px;
      padding: 3px 8px;
      font-size: 12px;
      color: #ff5454;
      background-color: #ffe7e7;
      border-radius: 2px;
      transform: translateY(-50%);
    }
  }
}
</style>
